import React, { useEffect, useState } from 'react';
import { Button } from "@/components/ui/button"
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import FundsFilter from './FundsFilter';
export default function ({ loginUser, bookOptions, onBookIdChange, accountOptions, onAccountNoChange, tagOptions, onTagsChange, primaryTags  }) {
    const [currentBookId, setCurrentBookId] = useState(null);
    useEffect(() => {
        if (bookOptions.length > 0) {
            setCurrentBookId(bookOptions[0]?.value);
            onBookIdChange?.(bookOptions[0]?.value);
        }
    }, [bookOptions]);
    return (
        <header className="flex h-14 items-center gap-4 border-b bg-background px-4">
             <DropdownMenu>
                <DropdownMenuTrigger asChild>
                    <Button
                        variant="outline"
                        size="icon"
                        className="overflow-hidden rounded-full"
                    >
                        <img
                            src={loginUser?.avatarUrl}
                            width={36}
                            height={36}
                            alt="Avatar"
                            className="overflow-hidden rounded-full"
                        />
                    </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                    <DropdownMenuItem>Settings</DropdownMenuItem>
                    <DropdownMenuItem>Support</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>Logout</DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
            <div className="relative ml-auto flex-1 md:grow-0 w-full funds-header-select">
                <Select onValueChange={bookId => {
                    setCurrentBookId(bookId);
                    onBookIdChange?.(bookId);
                }} value={currentBookId} className="w-full">
                    <SelectTrigger className="w-full">
                        <SelectValue placeholder="请选择账本" />
                    </SelectTrigger>
                    <SelectContent className="w-full funds-header-select">
                        {
                            bookOptions.map(opt => {
                                return <SelectItem key={opt.value} value={opt.value} className="w-full">
                                    <div className="flex leading-8 w-full">
                                        <div className="flex-1 text-left">{opt.label}</div>
                                        <div className="flex-none -space-x-4 ml-1 right-0">
                                            {(opt.options.find(item => item.value === 'accountNo')?.options || []).map(account => {
                                                return <img
                                                    alt="user 1"
                                                    src={account.avatarUrl}
                                                    className="relative inline-block h-8 w-8 rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
                                                />
                                            })}
                                        </div>
                                    </div>
                                </SelectItem>
                            })
                        }
                    </SelectContent>
                </Select>
            </div>
            <FundsFilter accountOptions={accountOptions} onAccountNoChange={onAccountNoChange} tagOptions={tagOptions} onTagsChange={onTagsChange} primaryTags={primaryTags} />
        </header>
    )
}
